{% import 'components/Document/SocialShare.html' as SocialShare %}

{% macro render(ViewAttr) %}
  {% set url = 'https://shopify.github.io/draggable' %}
  {% set siteName = 'Draggable JS Examples' %}
  {% set titleSep = ' | ' %}

  {% set parentFragment = ViewAttr.parent + titleSep if ViewAttr.parent %}
  {% set childFragment = ViewAttr.child + titleSep if ViewAttr.child %}
  {% set titleText = [parentFragment, childFragment, siteName] %}

  {% set HeadAttr = {
    siteName: siteName,
    title: ViewAttr.subheading,
    description: 'Draggable is a lightweight, responsive, modern drag and drop JavaScript library – the ideal choice for adding slick native-feeling drag and drop behaviour to your web apps.',
    siteUrl: url,
    socialImg: url + '/assets/img/social/draggable-social.png',
    twitterHandle: '@Shopify',
    twitterId: '17136315'
  } %}

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>{{ titleText | join('') | trim }}</title>

    <meta name="description" content="{{ HeadAttr.description }}">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">
    <meta name="theme-color" content="#212529">

    {{ SocialShare.render(HeadAttr) }}
    {% include 'components/Document/Favicon.html' %}

    <link rel="manifest" href="{{ url }}/manifest.json">
    <link rel="stylesheet" href="assets/css/examples-app.css?beta=12">

    <script src="assets/js/examples-runtime.js?beta=12" defer></script>
    <!-- <script src="assets/js/examples-vendor.js?beta=12" defer></script> -->
    <script src="assets/js/examples-app.js?beta=12" defer></script>
  </head>
{% endmacro %}
